<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="color-scheme" content="dark light" />
		%sveltekit.head%

		<style>
			body {
				--bg-1: hsl(0, 0%, 100%);
				--bg-2: hsl(206, 20%, 90%);
				--bg-3: hsl(206, 20%, 80%);
				--fg-1: hsl(0, 0%, 13%);
				--fg-2: hsl(0, 0%, 20%);
				--fg-2: hsl(0, 0%, 30%);
				--link: hsl(208, 77%, 47%);
				--link-hover: hsl(208, 77%, 55%);
				--link-active: hsl(208, 77%, 40%);
				--border-radius: 4px;
				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
					'Open Sans', 'Helvetica Neue', sans-serif;
				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
					'DejaVu Sans Mono', monospace;
				background: var(--bg-1);
				color: var(--fg-1);
				font-family: var(--font);
				line-height: 1.5;
				margin: 1rem;
				height: calc(100vh - 2rem);
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: normal;
				font-variant-numeric: tabular-nums;
				line-height: 1.1;
			}

			:is(h1, h2, h3, h4, h5, h6, p) {
				margin: 1rem 0.1rem;
			}

			label {
				margin: 0.5rem 0.1rem;
			}

			:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
				margin-top: 0;
			}

			:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
				margin-bottom: 0;
			}

			a {
				color: var(--link);
			}

			a:hover {
				color: var(--link-hover);
			}

			a:active {
				color: var(--link-active);
			}

			label {
				display: flex;
				gap: 0.5rem;
				align-items: center;
			}

			label input {
				margin: 0;
			}

			button,
			input,
			select {
				font-family: inherit;
				font-size: inherit;
			}

			button {
				background: var(--link);
				color: var(--bg-1);
				padding: 0.5rem 1rem;
				border: none;
				border-radius: var(--border-radius);
			}

			button:hover {
				background: var(--link-hover);
			}

			button:active {
				background: var(--link-active);
			}

			:is(button, button:hover, button:active):disabled {
				background: var(--link);
				filter: grayscale(1);
				opacity: 0.4;
			}

			input,
			textarea,
			select {
				padding: 0.5rem;
				border: 1px solid var(--bg-2);
				border-radius: var(--border-radius);
				box-sizing: border-box;
			}

			input,
			textarea {
				background: var(--bg-1);
			}

			select:not([multiple]) {
				background: var(--bg-2);
			}

			textarea {
				font-family: var(--font-mono);
				font-size: 0.9rem;
			}

			form {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				align-items: baseline;
			}

			ul:has(li):has(form) {
				list-style: none;
				padding: 0;
			}

			li form {
				flex-direction: row;
				gap: 0.5rem;
				margin: 0.5rem 0;
			}

			nav {
				position: relative;
				display: flex;
				gap: 1em;
				padding: 1em;
				background: var(--bg-2);
				z-index: 2;
				margin: 0 0 1em 0;
				border-radius: var(--border-radius);
			}

			nav a {
				text-decoration: none;
			}

			nav a[aria-current='true'] {
				border-bottom: 2px solid;
			}

			ul:has(form) {
				list-style: none;
				padding: 0;
			}

			progress {
				margin: 0.5rem 0;
			}

			progress:first-child {
				margin-top: 0;
			}

			progress:lsat-child {
				margin-bottom: 0;
			}

			.error {
				color: red;
			}

			code {
				background: var(--bg-2);
				font-family: var(--font-mono);
				font-size: 0.9em;
				padding: 0.15rem 0.3rem;
				border-radius: var(--border-radius);
			}

			ul.todos {
				padding: 0;
			}

			ul.todos li:not(:has(> form)),
			ul.todos li form {
				position: relative;
				display: flex;
				align-items: center;
				padding: 0.5em 0.5em 0.5em 1em;
				margin: 0 0 0.5em 0;
				gap: 0.5em;
				border-radius: 5px;
				user-select: none;
				background: var(--bg-1);
				filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
				transition: filter 0.2s, opacity 0.2s;
			}

			ul.todos .done {
				filter: none;
				opacity: 0.4;
			}

			ul.todos button {
				border: none;
				background-color: transparent;
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: 1rem 1rem;
				cursor: pointer;
				width: 3em;
				height: 3em;
				margin: -0.5em -0.5em -0.5em 0;
				aspect-ratio: 1;
				opacity: 0.5;
				transition: opacity 0.2s;
			}

			ul.todos button:hover {
				opacity: 1;
			}

			body.dark {
				--bg-1: hsl(0, 0%, 18%);
				--bg-2: hsl(0, 0%, 30%);
				--bg-3: hsl(0, 0%, 40%);
				--fg-1: hsl(0, 0%, 90%);
				--fg-2: hsl(0, 0%, 70%);
				--fg-3: hsl(0, 0%, 60%);
				--link: hsl(206, 96%, 72%);
				--link-hover: hsl(206, 96%, 78%);
				--link-active: hsl(206, 96%, 64%);
			}
		</style>
	</head>
	<body>
		<div style="display: contents">%sveltekit.body%</div>

		<script>
			const theme = new URL(window.location).searchParams.get('theme');

			document.body.classList.remove('light', 'dark');
			document.body.classList.add(theme || 'light');
		</script>
	</body>
</html>
